<template>
  <div>
    <el-button size="mini" type="success" style="margin-bottom: 10px" icon="el-icon-plus" @click="openFollowingContentDailog">新增记录</el-button>
    <!-- 表格  -->
    <el-table :data="tableData" border stripe>
      <el-table-column type="expand" size="small" width="40">
        <template slot-scope="props" size="small">
          <el-form label-position="left" class="demo-table-expand">
            <el-form-item label="跟进内容:">
              <span>{{ props.row.followingContent }}</span>
            </el-form-item>
            <el-form-item label="跟进类型:">
              <el-tag size="small" :type="props.row.typeName === '远程沟通记录' ? 'primary' : 'success'">{{props.row.typeName}}</el-tag>
            </el-form-item>
            <el-form-item label="跟进人员:">
              <span>{{ props.row.followingUser }}</span>
            </el-form-item>
            <el-form-item label="跟进时间:">
              <span>{{ props.row.followingTime.replace('T',' ') }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="followingContent" label="跟进内容" header-align="center">
        <template slot-scope="props">
          <el-popover placement="bottom" trigger="hover" :content="props.row.followingContent">
            <span slot="reference" class="table-overflow-hidden">{{props.row.followingContent}}</span>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="typeName" label="跟进类型" align="center" width="100">
        <template slot-scope="props">
          <el-tag size="small" :type="props.row.typeName === '远程沟通记录' ? 'primary' : 'success'">{{props.row.typeName}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="followingUser" label="跟进人员" align="center" width="100"></el-table-column>
      <el-table-column prop="followingTime" label="跟进日期" align="center" width="160"></el-table-column>
      <el-table-column label="操作" width="50" align="center" v-if="showActionCloumn">
        <template slot-scope="props"  v-if="userInfo.name == props.row.followingUser">
          <el-button type="text" size="mini" @click="delFollowingInfo(props.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination layout="total, sizes, prev, pager, next, jumper"
                   :total="pagging.total"
                   :current-page="pagging.currentPage"
                   :page-sizes="pagging.sizes"
                   @size-change="sizeChange"
                   @current-change="pageChange">
    </el-pagination>

    <channel-content-dialog :dialog-visible="dialogVisible"
                          :channel-id="channelId"
                          @close="onClose"></channel-content-dialog>
  </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import { getChannelfollowingPaging, deleteChannelfollowing } from '@/api/channel'
    import ChannelContentDialog from './channel-content-dialog'

    export default {
      props: {
        channelId: { // 合同号
          type: Number
        }
      },
      data() {
        return {
          // 新增跟进记录dailog状态
          dialogVisible: false,
          // 表格数据
          tableData: [],
          // 分页属性
          pagging: {
            total: 0,
            currentPage: 1,
            pageSize: 10,
            sizes: [10, 30, 50, 100]
          }
        }
      },
      computed: {
        ...mapGetters([
          'userInfo'
        ]),
        showActionCloumn(){
          var result = false;
          for(var data of this.tableData){
              if(data.followingUser == this.userInfo.name){
                result = true;
              }
          }
          return result;
        }
      },
      mounted() {
        this.search()
      },
      methods: {
        search() {
          this.pagging.currentPage = 1
          this.getTableData()
        },
        // 获取跟踪记录
        getTableData() {
          const params = {
            channelId: this.channelId,
            type: 1,
            pageSize: this.pagging.pageSize,
            pageIndex: this.pagging.currentPage
          }
          getChannelfollowingPaging(params).then(res => {
            if (res.data.success) {
              const result = res.data.data
              result.data.map(d=>{
                d.followingTime = d.followingTime.replace('T',' ');
              })
              this.tableData = result.data
              this.pagging.total = result.totalCount
              this.pagging.currentPage = result.pageIndex
              this.pagging.pageSize = result.pageSize
            }
          })
        },
        // 删除跟进记录
        delFollowingInfo(id) {
          this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            closeOnClickModal: false
          }).then(() => {
            return deleteChannelfollowing({
              deleteruserid: this.userInfo.id,
              deletiontime: new Date(),
              id: id
            })
          }).then(res => {
              if (res.data.success) {
                const result = res.data.data
                if (result) {
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  })
                  this.getTableData()
                  this.$emit('reflash-top-table')
                }
              }
          })
        },
        // 每页显示条数变更新
        sizeChange(size) {
          this.pagging.pageSize = size
          this.getTableData()
        },
        // 跳转到页面
        pageChange(curPage) {
          this.pagging.currentPage = curPage
          this.getTableData()
        },
        // 打开新增跟进记录界面
        openFollowingContentDailog() {
          this.dialogVisible = true
        },
        // 关闭
        onClose() {
          this.dialogVisible = false
          this.getTableData()
        }
      },
      components: {
        ChannelContentDialog
      },
      watch: {
        channelId() {
          this.search()
        }
      }
    }

</script>

<style scoped>

</style>
